<!-- 商品中心 -->
<template>
	<view class="pages relative">
		<!-- 顶部 -->
		<view class="pages-top bgc-w boxShadow pb-20">
			<!-- 顶部导航 -->
			<g-pages-tab class="pages-tab bgc-w" :list="pagesTab" :index='activity_type' @change="changePagesTab"
				type="scroll" />
			<!-- 分类 -->
			<u-tabs :list="categoryLists" lineColor="#00A191" :current="categoryIndex"
				@change="changeCategory"></u-tabs>
			<!-- 筛选 -->
			<view class="state-box row-box bgc-w p-20" v-if="stateList.length">
				<view class="state-item flex align-items-center justify-content-center"
					:class="{'state-item-ac':index==stateIndex}" v-for="(item,index) in stateList" :key="index "
					@click="changeState(index)">
					<text>
						{{item.title}}
						<text class="iconfont" v-if="item.sort=='all'">&#xe612;</text>
						<text class="iconfont" v-if="item.sort=='rise'">&#xe622;</text>
						<text class="iconfont" v-if="item.sort=='fall'">&#xe621;</text>
					</text>
				</view>
			</view>
			<view class="row-box banner-box">
				<view class="process-item fcc" v-for="(item,index) in processList" :key="index">
					<image :src="item.img" mode="scaleToFill" class="process-img"></image>
					<text class="process-text fc-9 mt-10">{{item.text}}</text>
					<view class="process-link" v-if="index<3"></view>
				</view>
			</view>
		</view>

		<!-- 内容 -->
		<view class="pages-list-box relative pt-20" v-if="pagesLists&&pagesLists.length">
			<goods-item v-for="(item,index) in pagesLists" :key="index" :info="item" :activity_type="activity_type"
				@share="share"></goods-item>
		</view>
		<view class="pages-list-box relative" v-else>
			<u-empty mode="data" icon="/static/images/common/no_data.png"></u-empty>
		</view>
		<!-- 技术支持 -->
		<p-support class=""></p-support>
	</view>
</template>

<script>
	import goodsItem from './components/goodsItem.vue'
	import {
		apiGetActiveCategory,
		apiGetActiveGetGoods,
		apiGetGoodsCategory,
		apiGetGoods
	} from '@/api/chatToolbar.js'
	export default {
		components: {
			goodsItem
		},
		data() {
			return {
				// 顶级分类:0-接龙 1-电商 2-社区团购 3-本地生活
				activity_type: 0,
				// 分类
				categoryLists: [],
				//激活的分类
				categoryIndex: 0,
				// 推荐/高佣之类
				stateIndex: 0,
				// 
				stateType: 1,
				//数据
				pagesLists: [],
				// 
				stateList: [],
				earn: []
			};
		},
		async onLoad() {
			//当执行完APP生命周期中的onlaunch，再执行页面中的业务逻辑
			await this.$onLaunched;
			await this.init()
		},
		async onShow() {
			await this.$onLaunched;
			await this.$qwJssdk.init(['sendChatMessage'])
		},
		onPullDownRefresh() {
			this.resetList()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		onReachBottom() {
			this.page++
			this.getList()
		},
		methods: {
			// 初始化
			async init() {
				let res = ''
				if (!this.activity_type) {
					//接龙
					res = await apiGetActiveCategory()
				} else {
					// 其他
					res = await apiGetGoodsCategory()
				}
				this.categoryLists = [{
					id: 0,
					name: '全部分类'
				}, ...res]
				this.stateList = [{
					title: '推荐',
					sort: ''
				}, {
					title: '高佣',
					sort: ''
				}, {
					title: '热销',
					sort: ''
				}, {
					title: '售价',
					sort: ''
				}, ]
				this.categoryIndex = 0
				this.stateIndex = 0
				this.stateType = 1
				this.resetList()
			},
			// 重置
			resetList() {
				this.page = 1
				this.pagesLists = []
				this.getList()
			},
			// 切换分类
			changeCategory(item) {
				this.categoryIndex = item.index
				this.resetList()
			},
			// 获取列表
			async getList() {
				let res = ''
				if (!this.activity_type) {
					//接龙
					res = await apiGetActiveGetGoods({
						category_id: this.categoryLists[this.categoryIndex].id || 0,
						type: this.stateType,
						page_no: this.page,
						page_size: 10,
					})
				} else {
					//其他
					res = await apiGetGoods({
						category_id: this.categoryLists[this.categoryIndex].id || 0,
						activity_type: this.activity_type,
						type: this.stateType,
						page_no: this.page,
						page_size: 10,
					})
				}
				if (this.page == 1) {
					this.pagesLists = res.list
				} else {
					this.pagesLists = [...this.pagesLists, ...res.list]
				}
			},
			// 分享
			share(item) {
				this.$qwJssdk.sendChatMessage({
					...item
				})
			},
			// 切换顶部导航索引
			changePagesTab(index) {
				this.activity_type = index
				this.init()
			},
			// 切换type
			changeState(index) {
				this.stateIndex = index
				if (index == 3) {
					if (this.stateList[index].sort !== 'fall') {
						this.stateList[index].sort = 'fall'
						this.stateType = 4
						this.resetList()
						return
					}
					if (this.stateList[index].sort !== 'rise') {
						this.stateList[index].sort = 'rise'
						this.stateType = 5
						this.resetList()
						return
					}
				} else {
					this.stateList[3].sort = ''
					this.stateType = (index + 1)
				}
				this.resetList()
			},
		},
		computed: {
			pagesTab() {
				return [{
					title: '接龙'
				}, {
					title: '电商'
				}, {
					title: '社区团购'
				}, {
					title: '本地生活'
				}, ]
			},
			processList() {
				return [{
					title: '',
					text: '打开商品中心',
					img: '/static/images/verification/p-icon-1.png'
				}, {
					title: '',
					text: '选择商品',
					img: '/static/images/verification/p-icon-2.png'
				}, {
					title: '',
					text: '分享赚佣金',
					img: '/static/images/verification/p-icon-3.png'
				}, {
					title: '',
					text: '查看宝典',
					img: '/static/images/verification/p-icon-4.png'
				}];
			}

		}
	}
</script>

<style lang="scss" scoped>
	.static {
		position: static;
	}

	.banner-box {
		width: 690rpx;
		border-radius: 20rpx;
		padding: 10rpx 20rpx;
		margin: 0 auto;
		background-image: linear-gradient(0, #fff, #FFF6E0);

		.process-item {
			position: relative;

			.process-img {
				width: 88rpx;
				height: 88rpx;
			}

			.process-text {
				width: 130rpx;
				text-align: center;
				font-size: 20rpx;
				line-height: 28rpx;
			}
		}

		.process-link {
			width: 72rpx;
			height: 4rpx;
			background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 60%);
			border-radius: 200rpx 200rpx 200rpx 200rpx;
			position: absolute;
			top: 42rpx;
			left: 120rpx;
		}
	}

	.pages-top {
		width: 750rpx;
		position: sticky;
		top: 0;
		z-index: 3;

		.pages-top-item {
			height: 100rpx;
			margin: 0 auto;
		}

		.pages-tab {
			height: 96rpx;
		}

		.banner {
			width: 100%;
			height: 156rpx;
		}
	}

	.filter-icon {
		width: 48rpx;
		height: 48rpx;
	}

	.filter-popup-box {
		top: 200rpx;
		left: 0;
		right: 0;
		bottom: 0;

		.btn-info {
			width: 300rpx;
			line-height: 80rpx;
		}

		.btn-ac {
			width: 300rpx;
			line-height: 80rpx;
		}

	}

	.msck {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 2;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.pages-list-box {
		z-index: 1;
	}

	.state-item-ac {
		text {
			color: #333;
			font-weight: 900;
		}
	}
</style>